<template>
	<view class="waterfall-container">
		<view class="waterfall-column">
			<view class="product-item" v-for="(item, index) in localLeftProducts" :key="index">
				<image :src="item.image" mode="widthFix" class="product-image" @click="shiftFullScreen(item)"/>
				<view class="product-desc">{{item.desc}}</view>
				<view class="product-info">
					<view class="likes">
						<image src="/static/icon/like.png" class="like-icon" alt="img"></image>
						<text>{{ item.likes }}</text>
					</view>
					<view class="store-name">{{ item.storeName }}</view>
				</view>
			</view>
		</view>
		<view class="waterfall-column">
			<view class="product-item" v-for="(item, index) in localRightProducts" :key="index">
				<image :src="item.image" mode="widthFix" class="product-image" alt="img" @click="shiftFullScreen(item)"/>
				<view class="product-desc">{{item.desc}}</view>
				<view class="product-info">
					<view class="likes">
						<image src="/static/icon/like.png" class="like-icon"></image>
						<text>{{ item.likes }}</text>
					</view>
					<view class="store-name">{{ item.storeName }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,defineEmits,defineProps } from 'vue'
	import{Product} from '../../../types/types'
	const props = defineProps<{
		leftProducts:Product[],
		rightProducts:Product[],
	}>();
	// 定义自定义事件
	const emit = defineEmits(['productClick']);
	
	// 定义一个本地变量用于双向绑定
	const localRightProducts = ref(props.rightProducts);
	const localLeftProducts = ref(props.leftProducts);
	// 点击进入商品全屏页
	const shiftFullScreen = (item: Product)=>{
		// 触发自定义事件并传递当前点击的商品信息
		  emit('productClick', item);
	}
	
</script>

<style scoped lang="scss">
	.waterfall-container {
		display: flex;
		padding: 0.6rem;
		gap: 0.6rem;
	}
	
	.waterfall-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}
	
	.product-item {
		background: #fff;
		border-radius: 0.5rem;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		font-size: 0.63rem;
	}
	
	.product-image {
		width: 100%;
		height: auto;
	}
	
	.product-desc {
		margin-left: 0.4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.product-info {
		padding:0.1rem 0.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.store-name {
		font-size: 0.8rem;
		color: #333;
		font-weight: 600;
	}
	.like-icon{
		width: 1rem;
		height: 1rem;
	}
	.likes {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
</style>